<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div class="imgDetail">
    <!-- 头部 -->
    <headers text="图片分享" >
      <template #left>
        <div style="width: 15px"></div>
      </template>
    </headers>
    <!-- 二级头部 -->
    <van-nav-bar
      title="图片详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 详情内容 -->
    <!-- 标题部分 -->
    <div class="imgTOP">
      <div class="imgtitle">{{ imgInfoList.title }}</div>
      <div class="desc">
        <span class="time">{{ imgInfoList.add_time | dateFormat }}</span>
        <span class="see">{{ imgInfoList.click }}次浏览</span>
      </div>
    </div>
    <!-- 略缩图 -->
    <div class="picArr">
      <div class="item" v-for="(item, index) in thumImages" :key="index">
        <img :src="item.src" alt="" />
      </div>
    </div>
    <!-- 描述 -->
    <div class="content" v-html="imgInfoList.content"></div>

    <!-- 评论组件 -->
    <comment
      :commentList="articleComment"
      @loadMore="loadMore"
      @publishComment="addComment"
    ></comment>
    <!-- 底部 -->
    <footers :list="goods"></footers>
  </div>
</template>


<script>
import headers from "@/components/headers.vue";
import footers from "@/components/footers.vue";
import graphic from "@/components/graphic.vue";
import comment from "@/components/comment.vue";
// 引入api
import {
  getImgInfo,
  getThumImages,
  getComments,
  publishComment,
} from "@/apis/images";
import moment from "moment";

export default {
  data() {
    return {
      goods: [
        {
          icon: "icon-jia1",
          text: "首页",
          name: "index",
        },
        {
          icon: "icon-huiyuan",
          text: "会员",
          name: "info",
        },
        {
          icon: "icon-gouwuche",
          text: "购物车",
          name: "shop",
        },
        {
          icon: "icon-1-1",
          text: "搜索",
          name: "serach",
        },
      ],
      imgInfoList: {}, // 图片详情
      thumImages: [], //图片略缩图
      articleComment: [], //文章评论数据
      pageindex: 1, //文章评论的页码
    };
  },
  methods: {
    // 监听 子组件事件，加载更多评论
    loadMore() {
      this.pageindex++;
      this.loadComment();
    },
    // 监听 子组件发布评论事件，data是评论内容
    async addComment(data) {
      if (data.length === 0) {
        this.$toast.fail("输入不能为空");
        return;
      }
      let res = await publishComment({ artid: this.id, content: data });
      console.log(res);
      if (res.data.message === "评论提交成功") {
        this.$toast.success("评论成功");
        this.articleComment = (
          await getComments({ artid: this.id, pageindex: this.pageindex })
        ).data.message;
      }
    },
    // 封装加载评论的函数
    async loadComment() {
      // 获取评论
      let res = (
        await getComments({ artid: this.id, pageindex: this.pageindex })
      ).data.message;
      this.articleComment.push(...res);
      // console.log(this.articleComment);
    },
  },
  async mounted() {
    let id = this.id;
    // 图片详情
    this.imgInfoList = (await getImgInfo({ imgid: id })).data.message[0];
    // console.log(this.imgInfoList);

    //图片略缩图组
    this.thumImages = (await getThumImages({ imgid: id })).data.message;
    // console.log(this.thumImages);

    //获取文章评论
    this.loadComment();

    window.scrollTo(0, 0);
  },
  filters: {
    dateFormat(data) {
      return moment(data).format("YYYY-MM-DD");
    },
  },
  components: {
    headers,
    footers,
    graphic,
    comment,
  },
  //该文章的id
  props: ["id"],
};
</script>


<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style lang='less' scoped>
@import url("//at.alicdn.com/t/font_2621049_d43meoif9r.css");
/deep/ .van-nav-bar__left {
  padding: 0 5px;
}
/deep/ .van-nav-bar__title {
  margin-left: 135px;
}
.imgDetail {
  padding-bottom: 50/375 * 100vw;
}
.imgTOP {
  height: 105/375 * 100vw;
  border-bottom: 1px solid #ccc;
}
.imgtitle {
  font-size: 20/375 * 100vw;
  color: #39b54a;
  font-weight: 700;
  margin: 5/375 * 100vw 0;
  padding-left: 5/375 * 100vw;
}
.desc {
  span {
    color: #888;
    margin-right: 10/375 * 100vw;
    font-size: 14/375 * 100vw;
  }
  .time {
    margin-left: 5px;
  }
}
.picArr {
  display: flex;
  flex-wrap: wrap;
  margin: 20/375 * 100vw 0;
  padding: 0 5/375 * 100vw;
  .item:nth-child(3n) {
    margin-right: 0;
  }
  .item {
    width: 100/320 * 100vw;
    height: 100/320 * 100vw;
    margin-bottom: 5/375 * 100vw;
    margin-right: 5/375 * 100vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  margin-bottom: 50px;
  padding: 0 5px;
}
</style>